{% extends "admin/base_site.html" %}

{% block breadcrumbs %}{% endblock %}
{% block content %}

<script src="//cdn.bootcss.com/Base64/1.0.0/base64.min.js"></script>

<!--------------------main-fram---------------------------------->
<script type="text/javascript">
	$(function () {
		$('#left-nav [href="/admin/studio/studio/"]').parents('li').addClass('active')
	})
	
	
	Vue.config.debug = true
	studio={{studio | safe}}
	studio.code_inject=atob(studio.code_inject); 

	studio.view_able=Boolean(studio.temp)

	//{
	//	pk:'{{studio.pk}}'
	//	name:'{{studio.name}}',
	//	logo:'{{studio.logo}}',
	//}
	

	Vue.config.delimiters = ['[[', ']]'];
	errors={}
	
	$(function () {

		var t=new Vue({
			el:'#vue_content',
			data:{
				studio:studio,
				face_page:'choose-temp',
				errors:errors,
				saveing:false,
			},
			methods:{
				has_error:function () {
					for(x in this.errors){
						return true
					}
					return false
				},
				save:function () {

					var self=this;
					self.saveing=true;
					var fea_str=''
					for (k in apps){
						if(apps[k].is_fea){
							fea_str+= (apps[k].sku+';')
						}
					}
					studio.fea_app= fea_str
					
					var post_data={
						save_studio:{studio:studio}
					};
					$.post('',JSON.stringify(post_data),function (data) {
						setTimeout(function(){
							self.saveing=false;
						},2000)
						
						for(k in self.errors){
							Vue.delete(self.errors,k)
						}
						var errors=data.save_studio.errors
						for (k in errors){
							Vue.set(self.errors,k,errors[k])
						}

						for(k in errors){
							return
						}
						self.studio.view_able=true
			
					})
				},
				view_studio:function () {
					window.open("/page/"+this.studio.name+"/home" ,'_blank')
				}
			}
		})
		Vue.nextTick(function () {
			$('#vue_content').removeClass('myhide')
		})
	})
	
//-----------AJAX GLOBAL EVENT--------------
$(document).ajaxSuccess(function (event,data) {
	var rt=data.responseJSON
    if(rt && rt.msg){
	    alert(rt.msg)
    }
}).ajaxError(function (event,jqxhr, settings, thrownError) {
	if(! window.iclosed || jqxhr.status !=0){
		 alert('server has error')
	 	{% if debug %}
			alert(jqxhr.responseText)
		{% endif %}
	}
})
$(window).bind('beforeunload',function () {
	window.iclosed=true
})
</script>

<style type="text/css" media="screen" id="test">
	.myhide{
		display: none;
	}
</style>
<div id='vue_content' class='myhide'>
	<div id='logo_div'>
		<h1 v-text='studio.name'></h1>
		<!--view     -->
		<button name="test" 
			type="button" @click='view_studio()'
			target="_blank" class="btn btn-default" 
			:disabled='!studio.view_able'>View</button>
		
		<!-- <a v-show='saveing' transition='expand'>Uploading</a>-->
		<button name="test" type="button" value="val" @click="save()"  :class="{'save':!saveing}" :disabled='saveing'><span v-if='!saveing'> Save </span><span v-if='saveing'>Saving</span></button>
		<!-- <a href="/studio/zip/[[studio.name]]">Zip</a> -->
		<!--<a href="/studio/download/[[studio.name]]">DownLoad</a>-->

	</div>
	<div class="alert alert-danger" role="alert" style="margin-top: 15px" v-show='has_error()'>
		Oh snap! Change a few things up and try submitting again. --Error in [Studio Infomation]
	</div>
	
	<ul class='menu'>
		<li @click='face_page="choose-temp"' 
			:class="{'active':face_page=='choose-temp'}">Choose Template</li>
		<li @click="face_page='first-page'" 
			:class="{'active':face_page=='first-page'}">Studio Information</li>
		<li @click="face_page='second-page'" 
			:class="{'active':face_page=='second-page'}">Apps</li>
		<li @click='face_page="code-inject"'
			:class="{'active':face_page=='code-inject'}">Code Injection</li>
		<li @click='face_page="deploy"'
			:class="{'active':face_page=='deploy'}">Deploy</li>
	</ul>

	<temp-choice v-show='face_page=="choose-temp"' ></temp-choice>
	<first-page v-show='face_page=="first-page"' v-ref:fp ></first-page>
	<second-page v-show='face_page=="second-page"'></second-page>
	<code-inject v-show='face_page=="code-inject"'></code-inject>
	<deploy v-show='face_page=="deploy"'></deploy>

</div>

{#{% include "studio/studio_websock.html" %}#}

{% include "studio/temp_choice.html" %}
<!------------------------first-page------------------>
{% include "studio/first-page.html" %}


<!------------------second-page------------------------>

{% include "studio/second-page.html" %}

{% include 'studio/deploy.html' %}

{% include 'studio/code_inject.html' %}
<!-------------------over------------------------------>
<style type="text/css" media="screen" id="test">
	[v-cloak] {
	  display: none;
	}

	*{
		margin: 0;
		padding: 0;
	}
	label{
		font-weight: 600;
	}
	#logo_div{
		overflow: hidden;
		padding: 15px;
		background: #ffffff;
	}
	#logo_div h1{
		margin: auto;
		float: left;
	}
	#logo_div button,#logo_div a{
		float: right;
		padding: 6px 15px;
		border: 0 none;
		outline: 0 none;
		border-radius: 4px;
		font-weight: 600;
		letter-spacing: 1px;
		margin-right: 20px;
	}
	#logo_div button:hover{
		box-shadow: 0 0 5px #bababa;
	}
	.save{
		background: #0092F2;
		color: #ffffff;
	}
	/*.view{*/
		/*background: #ffff09;*/
		/*color: #0092F2;*/
	/*}*/
	.menu{
		margin: 30px auto;
		border-bottom: 1px solid #DADCDE;
	}
	.menu li{
		display: inline-block;
		padding: 10px 20px;
		font-size: 16px;
	}
	.menu li:hover{
		cursor: pointer;
	}
	.menu .active{
		border-bottom: 5px solid #0092F2;
		color: #0092F2;
	}
	.fieldWrapper input,.fieldWrapper textarea{
		width:90%;
	}
	.fieldWrapper input{
		height:30px;
	}
	.up_btn{
		padding: 5px 15px;
	}
	._row{
		border-bottom: 1px dashed rgba(36, 38, 96, 0.08);
	}
	.cell{
		vertical-align: top;
		width:45%;
		display: inline-block;
	}
	.interval{
		height: 20px;
	}
	.row-title{
		margin: 0;
		padding: 20px 0;
		font-size: 22px;
		font-weight: 100;
		color: #92979D;
	}
	.error{
		color: red;
	}
	.error input,.error textarea{
		border: 1px solid red;
	}

</style>


{% endblock %}